.banner {
    position: relative;
    .login-position-outerbox {
        position: absolute;
        left: 70%;
        top: 50%;
        display: flex;
        justify-content: flex-end;
        transform: translate(-50%, -50%);
        z-index: 999;
        .login-box {
            background: #fff;
            width: 330px;
            .login-top-login {
                padding: 17px 12px 5px 14px;
                .login-title {
                    border-bottom: 2px solid #E8E8E8;
                    padding-bottom: 13px;
                    color: #333333;
                    font-size: 18px;
                    span {
                        &::before {
                            content: '';
                            display: inline-block;
                            width: 3px;
                            height: 13px;
                            background: #DE4729;
                            margin-left: 3px;
                            margin-right: 12px;
                        }
                    }
                }
                .login-input-box {
                    height: 50px;
                    margin-top: 21px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    border: 1px solid #D7D7D7;
                    border-radius: 6px;
                    .icon-box {
                        width: 52px;
                        background: #e8e8e8;
                        height: 100%;
                        img {
                            width: 24px;
                            height: 24px;
                            position: relative;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                    }
                    .login-input-input {
                        padding-left: 15px;
                        width: 170px;
                        &::-webkit-input-placeholder {
                            color: #929292;
                        }
                    }
                }
                .warning-text {
                    color: #E24D2B;
                }
                .login-btn {
                    height: 50px;
                    line-height: 50px;
                    background: url(../imgs/login-btn-bg.png) no-repeat center center;
                    border-radius: 6px;
                    color: #fff;
                    font-size: 16px;
                    cursor: pointer;
                    margin-top: 24px;
                    letter-spacing: 2px;
                }
            }
            .login-bottom-register {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 24px 32px 19px 38px;
                color: #525252;
                background: #e8e6ed;
                span {
                    cursor: pointer;
                }
                .special-color {
                    color: #E24D2B;
                }
            }
        }
        .haslogin-box {
            background: #fff;
            width: 330px;
            padding: 27px 50px 30px 47px;
            letter-spacing: 2px;
            font-size: 16px;
            .avatar-box {
                img {
                    width: 82px;
                    height: 82px;
                }
            }
            .welcome-text {
                margin-top: 28px;
                color: #4F4F4F;
            }
            .logout-btn {
                margin-top: 27px;
                border: 1px solid #7F7F7F;
                border-radius: 6px;
                height: 50px;
                line-height: 50px;
                color: #7F7F7F;
                font-weight: bold;
                cursor: pointer;
            }
            .toUserCenter-btn {
                margin-top: 17px;
                border: 1px solid #E52A20;
                border-radius: 6px;
                height: 50px;
                line-height: 50px;
                font-weight: bold;
                cursor: pointer;
                .font-color {
                    color: #E52A20;
                }
            }
        }
    }
}

.hot-high-low-area {
    margin-top: 4px;
    .hot-high-low-area-left {
        padding: 21px 3px 1px 4px;
        background: #fff;
        .hot-high-low-title {
            border-bottom: 2px solid #EDF0F9;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #ABABAB;
            font-size: 18px;
            letter-spacing: 2px;
            .hot-low-high-public {
                margin-right: 125px;
                padding: 0 3px 8px 2px;
                cursor: pointer;
                &:last-child {
                    margin-right: 0;
                }
            }
            .title-icon {
                width: 16px;
                height: 16px;
                margin-right: 6px;
                position: relative;
                top: 2px;
            }
            .active {
                color: #E52A20;
                border-bottom: 3px solid #E6342A;
            }
        }
        .hot-high-low-content {
            padding: 23px 11px 0 15px;
            .content-list-li {
                margin-bottom: 42px;
                .content-list-li-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .lottery-his-message {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .lottery-msg-icon {
                            margin-right: 9px;
                            img {
                                width: 78px;
                                height: 78px;
                            }
                        }
                        .lottery-msg-detail {
                            .lottery-msg-phasenum {
                                font-size: 16px;
                                color: #3B3B3B;
                                span {
                                    margin-right: 12px;
                                    &:last-child {
                                        margin-right: 0;
                                    }
                                }
                            }
                        }
                        .lottery-msg-lucknum {
                            margin-top: 8px;
                            .ssc-lucknum {
                                display: inline-block;
                                width: 37px;
                                height: 37px;
                                line-height: 37px;
                                border-radius: 50%;
                                background: #E52A20;
                                color: #fff;
                                font-size: 20px;
                                text-align: center;
                                margin-left: 21px;
                                &:first-child {
                                    margin-left: 14px;
                                }
                            }
                        }
                        .jianada-msg-lucknum {
                            .lucknum-item {
                                position: relative;
                                display: inline-block;
                                width: 37px;
                                height: 37px;
                                line-height: 37px;
                                border-radius: 50%;
                                background: #C9C9C9;
                                color: #fff;
                                font-size: 20px;
                                text-align: center;
                                margin-left: 29px;
                                &:first-child {
                                    margin-left: 0;
                                }
                                &:last-child {
                                    background: #E52A20;
                                    &:after {
                                        content: "";
                                    }
                                    &:before {
                                        position: absolute;
                                        content: "=";
                                        font-size: 16px;
                                        color: #3B3B3B;
                                        right: 48px;
                                    }
                                }
                                &:nth-last-child(2) {
                                    &:after {
                                        content: '';
                                    }
                                }
                            }
                            .lucknum-item {
                                &:after {
                                    position: absolute;
                                    content: "+";
                                    font-size: 16px;
                                    color: #3B3B3B;
                                    right: -20px;
                                }
                            }
                        }
                        .pk10-msg-luck {
                            .pk10-lucknum-item {
                                display: inline-block;
                                width: 31px;
                                height: 31px;
                                line-height: 31px;
                                text-align: center;
                                border-radius: 4px;
                                margin-right: 2px;
                                color: #270604;
                                &:last-child {
                                    margin-right: 0;
                                }
                            }
                        }
                    }
                    .countdown-live {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-top: 33px;
                        .countdown-text {
                            color: #8D8D8D;
                        }
                        .lottery-to-live {
                            display: inline-block;
                            width: 122px;
                            height: 39px;
                            line-height: 39px;
                            border-radius: 4px;
                            color: #fff;
                            background: #E52A20;
                            margin-left: 18px;
                            cursor: pointer;
                        }
                    }
                }
                .content-list-li-table {
                    margin-top: 15px;
                    .li-table-out-ul {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #313131;
                        .li-table-out-li {
                            width: 100%;
                            height: 80px;
                            &:last-child {
                                border-right: 1px solid #ECECEC;
                            }
                            .li-table-table-header {
                                height: 40px;
                                line-height: 40px;
                                background: #fafafa;
                                border-left: 1px solid #ECECEC;
                                border-top: 1px solid #ECECEC;
                                &:last-child {
                                    border-right: 1px solid #ECECEC;
                                }
                            }
                            .li-table-inner-ul {
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                .li-table-inner-li {
                                    height: 40px;
                                    line-height: 40px;
                                    width: 100%;
                                    border: 1px solid #ECECEC;
                                    border-right: 0;
                                }
                            }
                        }
                    }
                }
                .content-list-li-bottom {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 19px;
                    .list-li-bottom-line {
                        width: 419px;
                        .bottom-line-one {
                            height: 3px;
                            background: #F1F1F1;
                            margin-bottom: 2px;
                        }
                        .bottom-line-two {
                            height: 2px;
                            background: #F1F1F1;
                        }
                    }
                    .list-li-bottom-alink {
                        .alink-btn {
                            font-size: 12px;
                            color: #A9A9A9;
                            margin-left: 9px;
                            cursor: pointer;
                            &::after {
                                content: '';
                                display: inline-block;
                                width: 1px;
                                height: 12px;
                                background: #A9A9A9;
                                margin-left: 10px;
                                position: relative;
                                top: 1px;
                            }
                            &:last-child {
                                &::after {
                                    width: 0;
                                    margin-left: 0;
                                }
                            }
                        }
                        .active {
                            color: #E52A20;
                        }
                    }
                }
            }
        }
    }
    .hot-high-low-area-right {
        .right-news-lists {
            background: #fff;
            margin-top: 14px;
            padding: 28px 33px 38px 26px;
            .news-lists-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 20px;
                border-bottom: 1px solid #ebebeb;
            }
            .news-lists-title-left {
                color: #D7D7D7;
                font-size: 12px;
                .title-left-bigfont {
                    font-size: 16px;
                    color: #373737;
                    font-weight: 600;
                    margin-right: 9px;
                }
            }
            .news-lists-title-right {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: #292929;
                img {
                    width: 7px;
                    height: 10px;
                    position: relative;
                    top: -2px;
                }
            }
            .news-lists-details {
                ul {
                    .active {
                        color: #e52a20;
                    }
                }
                .lists-details-li {
                    align-items: center;
                    font-size: 12px;
                    color: #787878;
                    margin-top: 30px;
                    cursor: pointer;
                    .details-li-title {
                        color: #E52A20;
                    }
                }
            }
        }
    }
}

.plan-forecast-area {
    margin-top: 17px;
    background: url(../imgs/index-plan-bg.png) no-repeat center center;
    height: 298px;
    .plan-forecast-title {
        position: relative;
        padding-top: 26px;
        img {
            width: 352px;
            height: 16px;
        }
        .more {
            position: absolute;
            top: 24px;
            right: 10px;
            color: #1696FF;
        }
    }
    .plan-forecast-icon-list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 60px;
        .icon-out-box {
            width: 229px;
            height: 109px;
            background: url(../imgs/index-plan-lists-bg-one.png) no-repeat center center;
            padding-left: 126px;
            color: #fff;
            padding-top: 29px;
            margin-right: 30px;
            letter-spacing: 2px;
            .icon-inner-big-text {
                font-size: 18px;
                margin-bottom: 9px;
                font-weight: bold;
            }
            .icon-inner-small-text {
                font-size: 12px;
            }
        }
        .icon-out-box-two {
            background-image: url(../imgs//index-plan-lists-bg-two.png)
        }
        .icon-out-box-three {
            background-image: url(../imgs//index-plan-lists-bg-three.png)
        }
        .icon-out-box-four {
            background-image: url(../imgs//index-plan-lists-bg-four.png);
            margin-right: 0;
        }
    }
    .plan-forecast-lottery-list {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
        font-size: 12px;
        color: #a9a9a9;
        .lottery-list-item-outerbox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 15px;
            .list-item-line {
                width: 1px;
                height: 12px;
                background: #a9a9a9;
                margin-left: 12px;
            }
            &:last-child {
                .list-item-line {
                    width: 0;
                    margin-left: 0;
                }
            }
        }
        .lottery-list-item {
            position: relative;
            width: 80px;
            height: 19px;
            line-height: 19px;
            background-color: transparent;
            cursor: pointer;
            &::before {
                content: '';
                display: inline-block;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 10px solid transparent;
                position: absolute;
                left: 50%;
                top: -8px;
                transform: translate(-50%, 0);
            }
        }
        .active {
            .lottery-list-item {
                background-color: #E52A20;
                color: #fff;
                &::before {
                    border-bottom-color: #E52A20;
                }
            }
        }
    }
}

.chart {
    display: flex;
    justify-content: flex-start;
    .chart-left {
        padding: 23px 3px 28px 6px;
        background: #fff;
        margin-right: 3px;
        .chart-left-title {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 2px solid #EDF0F9;
            .left-title-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #ABABAB;
                font-size: 16px;
                margin-left: 65px;
                .left-title-line {
                    width: 1px;
                    height: 12px;
                    background: #e0e0e0;
                    margin-left: 70px;
                    position: relative;
                    top: -8px;
                }
                .left-title-text {
                    padding-bottom: 17px;
                    cursor: pointer;
                    font-weight: 600;
                }
                &:last-child {
                    .left-title-line {
                        background: transparent;
                    }
                }
                &:first-child {
                    margin-left: 0;
                }
                .active {
                    color: #E52A20;
                    border-bottom: 2px solid #E6342A;
                }
            }
        }
        .left-chart-box {
            padding: 17px 25px 0 15px;
            .chart-tabs {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .chart-tabs-left {
                    color: #363636;
                    flex: 1;
                    span {
                        cursor: pointer;
                        &::after {
                            content: '';
                            display: inline-block;
                            width: 1px;
                            height: 11px;
                            background: #e0e0e0;
                            margin-right: 20px;
                            margin-left: 15px;
                        }
                        &:nth-last-of-type(1) {
                            &::after {
                                width: 0;
                            }
                        }
                    }
                    .charts-title {
                        letter-spacing: 2px;
                    }
                    .active {
                        color: #E52A20;
                    }
                }
                .chart-tabs-right {
                    .toDetailsBtn {
                        font-size: 12px;
                        color: #686868;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .chart-right {
        background: #fff;
        padding: 28px 24px 44px 26px;
    }
    .news-lists-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebebeb;
    }
    .news-lists-title-left {
        color: #D7D7D7;
        font-size: 12px;
        .title-left-bigfont {
            font-size: 16px;
            color: #373737;
            font-weight: 600;
            margin-right: 9px;
        }
    }
    .news-lists-title-right {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #292929;
        cursor: pointer;
        img {
            width: 7px;
            height: 10px;
            position: relative;
            top: -2px;
        }
    }
    .news-lists-details {
        ul {
            .active {
                color: #e52a20;
            }
        }
        .lists-details-li {
            font-size: 12px;
            color: #787878;
            margin-top: 30px;
            cursor: pointer;
            .details-li-title {
                display: inline-block;
                width: 235px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 24px;
            }
        }
    }
}